<template>
	<div class="userblog">
    <Zothertop></Zothertop>
		<div class="maincon">
      <div class="topcon">
        <img src="../../images/IMG_wpfaqidejindian_header1.png" height="140" width="140" alt="">
        <p>Another</p>
        <p>217粉丝</p>
        <router-link to="/chatboxes">
          <button class="talkbtn">和ta聊天</button>
        </router-link>
        <button class="lookbtn">关注ta</button>
      </div>
      <div class="content">
        <div class="minicon">
          <img src="../../images/IMG_bianmeixue_01.png" >
          <p>今日推荐 | 底妆全靠它 春日幻彩</p>
        </div>
      </div>  
    </div>
    <div class="bg"></div>
	</div>
</template>
<script>
import Zothertop from "../../components/zothertop.vue"
export default {
    name: 'userblog',
    data() {
      return {
      }
    },
    components:{
      Zothertop
    }
 
}
</script>
<style lang="less" scoped>
  .maincon{
    float: left;
    margin: 20/75rem 20/75rem;
  } 
  .bg{
    height: 188/75rem;
    background: #ff406f;
  }
  .topcon{
    width: 710/75rem;
    background-color: #fff;
    box-shadow: 2/75rem 2/75rem 9/75rem rgba(0,0,0,0.1);
    border-radius: 10/75rem;
    text-align: center;
    font-size: 28/75rem;
    padding: 20/75rem 0 50/75rem 0;
  }
  button{
    background-color: #fff;
    font-size: 18/75rem;
    border: 1px solid #808080;
    width: 93/75rem;
    height:32/75rem;
    line-height:30/75rem;
    border-radius:32/75rem;
    margin:10/75rem  80/75rem;
  }
  .minicon{
    width: 710/75rem;
    background-color: #fff;
    box-shadow: 2/75rem 2/75rem 9/75rem rgba(0,0,0,0.1);
    border-radius: 10/75rem;
    text-align: center;
    font-size: 24/75rem;
    padding: 20/75rem 0;
    margin-top: 30/75rem;
  }
  .minicon p{
    text-align: left;
    margin:20/75rem 20/75rem 0 20/75rem;
  }
</style>